<script setup lang="ts">
import TopOneArticleBanner from '@/components/ContentFlowMain/TopOneArticleBanner.vue';
import ServerInformationAndRecommends from '@/components/ContentFlowMain/ServerInformationAndRecommends.vue';
import OnlineStudyRoomProfile from '@/components/ContentFlowMain/OnlineStudyRoomProfile.vue';
</script>


<template>
  <div id="contentFlowMainContainer" class="content__flow__main__layout">
    <section class="main__wrapper__full__colum">
      <h1 class="title__top__one__article section__title">推荐</h1>
      <top-one-article-banner ></top-one-article-banner>
    </section>

    <section class="main__wrapper__full__colum">
      <h1 class="title__top__one__article section__title">聊天室</h1>
      <online-study-room-profile class="main__wrapper__full__colum" />
    </section>

    <section class="main__wrapper__full__colum">
<!--      <h1 class="title__top__one__article section__title">⚔️文章列表⚔️</h1>-->
      <server-information-and-recommends />
    </section>
  </div>
</template>

<style lang="scss">
#contentFlowMainContainer {
  margin-bottom: var(--spacing-l);
  background-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  row-gap: var(--spacing-l);
  width: 100%;
  .main__wrapper__full__colum {
    grid-column: 1 / -1;
  }
}


.content__flow__main__layout {
  margin: 0 auto;
  padding: var(--spacing-m);
}
.title__top__one__article{
  grid-column: 1 / -1;
}
.section__title{
  color: var(--color-brand);
  border-bottom: var(--color-brand) solid 4px;
  line-height: 1.2;
  margin-bottom: var(--spacing-s);
}

</style>